/**
* author：王海虎
* version：1.0
* describe：虚戈页面拆分的tabs每一项
**/
import { Carousel } from '@ant-design/react-native';
import React from 'react';
import { ScrollView, Text, View, Image } from 'react-native';
import styles from '../assets/style';
export default renderContent = (props) => {
    let { data = [] } = props;
    return <ScrollView style={{ backgroundColor: '#fff' }}>
        {/* 走马灯 */}
        <View style={styles.notable}>
            <View>
                <View>
                    <Carousel
                        style={styles.wrapper}
                        selectedIndex={2}
                        autoplay
                        infinite
                    >
                        <View style={styles.containerHorizontal}>
                            {/* <Text>Carousel 1</Text> */}
                            <Image style={styles.imageAdaptation} source={require('../assets/images/banner.png')} />
                        </View>
                        <View style={styles.containerHorizontal}>
                            {/* <Text>Carousel 2</Text> */}
                            <Image style={styles.imageAdaptation} source={require('../assets/images/banner.png')} />
                        </View>
                        <View style={styles.containerHorizontal}>
                            {/* <Text>Carousel 3</Text> */}
                            <Image style={styles.imageAdaptation} source={require('../assets/images/banner.png')} />
                        </View>
                    </Carousel>
                </View>
            </View>
        </View>
        {/* 内容 */}
        <View style={styles.content}>
            <View style={styles.listItem}>
                <View style={[styles.transverse, { marginBottom: 10 }]}>
                    <Text style={{ flex: 1, fontSize: 17 }}>黄梅戏</Text>
                    <Text style={{ fontSize: 12, color: '#9d9d9d', marginRight: 5 }}>查看更多</Text>
                    <Image style={{ width: 4.7, height: 8 }} source={require('../../../assets/images/right-arrow.png')} />
                </View>
                <View style={styles.transverse}>
                    <View style={[styles.vertical, { alignItems: 'flex-start' }]}>
                        <View style={{ position: "relative" }}>
                            <View style={styles.pay}>
                                <Image style={{ width: 9, height: 8, }} source={require('../assets/images/pay.png')} />
                                <Text style={{ fontSize: 9, lineHeight: 12.5, color: '#FFFFFF', marginLeft: 3 }}>付费</Text>
                            </View>
                            <Image style={{ width: 168, height: 98, marginBottom: 5 }} source={require('../assets/images/2.png')} />
                        </View>
                        <Text style={{ flex: 1, fontSize: 14 }}>长乐黄梅戏剧团《女驸…</Text>
                        <Text style={{ flex: 1, color: '#9d9d9d', fontSize: 12, marginTop: 2 }}>周小燕  黄晓华</Text>
                    </View>
                    <View style={[styles.vertical, { alignItems: 'flex-start' }]}>
                        <Image style={{ width: 168, height: 98, backgroundColor: '#999', marginBottom: 5 }} source={require('../assets/images/3.png')} />
                        <Text style={{ flex: 1, fontSize: 14 }}>《闹九江》新昌调腔剧团</Text>
                        <Text style={{ flex: 1, color: '#9d9d9d', fontSize: 12, marginTop: 2 }}>周小燕  黄晓华</Text>
                    </View>
                </View>
                <View style={[styles.transverse, { marginTop: 10 }]}>
                    <View style={[styles.vertical, { alignItems: 'flex-start' }]}>
                        <Image style={{ width: 168, height: 98, backgroundColor: '#999', marginBottom: 5 }} source={require('../assets/images/4.png')} />
                        <Text style={{ flex: 1, fontSize: 14 }}>《寻亲记》袁国良</Text>
                        <Text style={{ flex: 1, color: '#9d9d9d', fontSize: 12, marginTop: 2 }}>周小燕  黄晓华</Text>
                    </View>
                    <View style={[styles.vertical, { alignItems: 'flex-start' }]}>
                        <Image style={{ width: 168, height: 98, backgroundColor: '#999', marginBottom: 5 }} source={require('../assets/images/5.png')} />
                        <Text style={{ flex: 1, fontSize: 14 }}>货郎旦.女弹 北方昆曲…</Text>
                        <Text style={{ flex: 1, color: '#9d9d9d', fontSize: 12, marginTop: 2 }}>周小燕  黄晓华</Text>
                    </View>
                </View>

                <View style={styles.listItem}>
                    <View style={[styles.transverse, { marginBottom: 10 }]}>
                        <Text style={{ flex: 1, fontSize: 17 }}>黄梅戏</Text>
                        <Text style={{ fontSize: 12, color: '#9d9d9d', marginRight: 5 }}>查看更多</Text>
                        <Image style={{ width: 4.7, height: 8 }} source={require('../../../assets/images/right-arrow.png')} />
                    </View>
                    <View style={styles.transverse}>
                        <View style={[styles.vertical, { alignItems: 'flex-start' }]}>
                            <View style={{ position: "relative" }}>
                                <View style={styles.pay}>
                                    <Image style={{ width: 9, height: 8, }} source={require('../assets/images/pay.png')} />
                                    <Text style={{ fontSize: 9, lineHeight: 12.5, color: '#FFFFFF', marginLeft: 3 }}>付费</Text>
                                </View>
                                <Image style={{ width: 168, height: 98, marginBottom: 5 }} source={require('../assets/images/2.png')} />
                            </View>
                            <Text style={{ flex: 1, fontSize: 14 }}>长乐黄梅戏剧团《女驸…</Text>
                            <Text style={{ flex: 1, color: '#9d9d9d', fontSize: 12, marginTop: 2 }}>周小燕  黄晓华</Text>
                        </View>
                        <View style={[styles.vertical, { alignItems: 'flex-start' }]}>
                            <Image style={{ width: 168, height: 98, backgroundColor: '#999', marginBottom: 5 }} source={require('../assets/images/3.png')} />
                            <Text style={{ flex: 1, fontSize: 14 }}>《闹九江》新昌调腔剧团</Text>
                            <Text style={{ flex: 1, color: '#9d9d9d', fontSize: 12, marginTop: 2 }}>周小燕  黄晓华</Text>
                        </View>
                    </View>
                    <View style={[styles.transverse, { marginTop: 10 }]}>
                        <View style={[styles.vertical, { alignItems: 'flex-start' }]}>
                            <Image style={{ width: 168, height: 98, backgroundColor: '#999', marginBottom: 5 }} source={require('../assets/images/4.png')} />
                            <Text style={{ flex: 1, fontSize: 14 }}>《寻亲记》袁国良</Text>
                            <Text style={{ flex: 1, color: '#9d9d9d', fontSize: 12, marginTop: 2 }}>周小燕  黄晓华</Text>
                        </View>
                        <View style={[styles.vertical, { alignItems: 'flex-start' }]}>
                            <Image style={{ width: 168, height: 98, backgroundColor: '#999', marginBottom: 5 }} source={require('../assets/images/5.png')} />
                            <Text style={{ flex: 1, fontSize: 14 }}>货郎旦.女弹 北方昆曲…</Text>
                            <Text style={{ flex: 1, color: '#9d9d9d', fontSize: 12, marginTop: 2 }}>周小燕  黄晓华</Text>
                        </View>
                    </View>
                </View>
            </View>
        </View>
    </ScrollView>;
};